<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
    <style>
        #span1{
            display: inline-block;  /*块元素*/
            width: 100px;
            height: 100px;
            background-color: gray;
        }
        #span1::after{
            content: '';
            position: absolute;
            left: 72px;
            margin-top: 15px;
            width: 70px;
            height: 70px;
            background-color: gray;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <!-- <h1>函数</h1> -->
    <!-- <button onclick="fun()">测试1</button> -->
    <br>
    <span id="span1">css练习</span>
    </span>
</body>
<script>
    //调用
    //fun();
    /*
    //全局函数(无论在哪调用都可以)
    function fun(){
        console.log(this);//window
        console.log("hello JSADV");
    }
    */
   //函数表达式(定义函数存储到变量中,不可以在定义前调用)
   /*
    var fun2=function(){
        alert("hello js2")
    }
    fun2();

    //构造函数(通过new Function构造函数)
    var fun1=new Function(alert("new function"));

    //函数的调用方式
    //json对象
    //方法调用()
    var temo={
        name:"提莫",
        sayhi:function(){
            console.log(this)   //当前对象
            alert("名字是:"+this.name); //提莫
        }
    }
//  temo.sayhi();
    //函数对象(可以new多个对象)--推荐
    function Hero(na){
        this.name=na;
        this.sayhi=function(){
            alert("i am"+this.name)
        }
    }
    var gt=new Hero("阿努比斯");
//  gt.sayhi();
    var ani=new Hero("安妮");
//  ani.sayhi();
*/

    //函数调用模式
/*
    function show(a,b,c){
        console.log(a,b,c);
    }
    //不给参数
    show()  //undefined undefined undefined
    show(1,2,3,4,5)//只取前三个 1,2,3


    //参数=另一个函数   √
    function func(name){
        console.log("我的名字:"+name);
    }
    function hello(fun,msg){
        fun(msg);
    }
    hello(func,"牛马"); //我的名字:牛马

    //函数的返回值能变吗?   √
    function hi(t){
        if(t){
            return "hello world";
        }else{
            return {name:'temo',age:18};
        }
    }
    var ret=hi(true);
    console.log(ret)
    //函数可以返回一个函数吗?   √
    function returnfun(){
        return function(a,b){
            console.log(a+b);
        }
    }
    var add=returnfun();
    add(4,5);   //9


    let a=[10,2,34,54,66,321];
    //返回  321位置5
    //找出a数组里谁最大和位置
    function find(a){
        let obj={max:0,index:0};
        for(let i in a){
            if(a[i]>obj.max){
                obj.max=a[i];
                obj.index=i;
            }
        }
        return obj;
    }
    var max=find(a);
    console.log(max)
*/
    //构造器调用模式
    var Person=function(na){
        this.name=na;
    }
    //修改原型
    Person.prototype.sayHi=function(){
        console.log("我的名字是:"+this.name);
    }
    var timi=new Person("timi");
    var mihoyou=new Person("mihoyou");
    timi.sayHi();
    mihoyou.sayHi();

    var t=new String(" hello ")
    //去空格
    String.prototype.mytrim=function(){
    //  var str=(this.replace (/\s+/g,""));
        var str=this.replaceAll(' ','');
        return str;
    }
    console.log(t.length);  //7
    t=t.mytrim();   //mytrim()方法
    console.log(t.length); //5

    //Apply调用模式
    function add(a,b,c){
        console.log(this.tag);
        console.log(a+b+c);
    }
    var ren={tag:"变换"}; //对象
    // add(1,2,3);
    //函数的拥有者变更  apply(谁,数组参数)
    add.apply(ren,[1,2,3]);

    //内置对象arguments
    //函数不列出参数
    function showAll(){
        //arguments是一个数组,存放所有的参数值  //类似与java中的object..
        for(let i=0;i<arguments.length;i++){
            alert(arguments[i]);
        }
    }
//    showAll(1,3,4)//1,3,4

    //匿名函数(立即执行)
    (function(){
        console.log("匿名函数");
    })();
    /*
        作业
        1、创建一个猫Cat对象，包含一个体重weight属性和吃饭eat的方法，每调用一次eat方法，体重就加1，
        调用3次eat方法后，在控制台打印出猫的体重。
        2、创建一个Car对象，包含一个花费属性cost和run方法，run方法中包含一个参数公里数kl，
        每跑1公里，花费就增加0.8元，调用run方法后，打印出花费。
        3、new 打印机 name 名字 print()  每3秒打印下自己的名字，打10次停    
    */
   //1、Cat
   function Cat(g){
       var j=1;
       this.weight=g;
       this.eat=function(){
           for(let i=1;i>0;){
           this.weight=this.weight+1;
           if(j==3){
               console.log(this.weight);
               break;
            }
           j++;
            }
       }
   }
   var cat1=new Cat(6);
//   cat1.eat();
   //2、Car
   function Car(km){
    this.cost=km*0.8;
    this.run=function(){
        console.log("花费money="+this.cost)
        return this.cost;
    }
   }
//   var car1=new Car(2);
//   car1.run();  //花费money数量
    //new 打印机
    //name名字
    //print()   每三秒打印下自己的名字
    function Dyj(name){
        this.name=name;
        this.print=function(){
            let i=1;
            let that=this; //保存当前对象this
            var time=setInterval(function(){
            if(i==10){
                alert("10次了")
                clearInterval(time);
            }
            console.log(that.name);
            i++;
            }, 3000);
        };
    }
    var dy=new Dyj("惠普打印机");
//    dy.print();
    var dy2=new Dyj("傻吊")
//    dy2.print();

    /*
        作业2
        0、解释以下的语法现象：
var arr1 = [[true,2,'one'][3],[1,{"num":47}][1]['num']];
var i = 3;
var arr2 = [(i -= 2,[true,'abc'][i]['length']),[[],[][0]][1]];
1、定义一个函数，他有两个参数，一个是执行次数，一个是需要执行的函数，调用这个函数。
2、定义一个函数，它的返回值是另外一个函数，另外这个函数有一个打印语句，请调用函数运行这个打印语句。
3、同时定义和运行一个匿名的函数，计算1到100之间的整数和
//4、创建一个猫Cat对象，包含一个体重weight属性和吃饭eat的方法，每调用一次eat方法，体重就加1，调用3次eat方法后，在控制台打印出猫的体重。
//5、创建一个Car对象，包含一个花费属性cost和run方法，run方法中包含一个参数公里数kl，每跑1公里，花费就增加0.8元，调用run方法后，打印出花费。
6、创建一个Dog对象，包含一个摇尾巴shake的方法，该方法有一个参数name，当name等于'Tom'时，在控制台打印‘主人回来了’，其他的值不执行任何代码。
7、创建一个函数，包含一个参数a，当a是函数时，执行a，否则打印出a的值。
8、在页面创建三个按钮，通过js脚本循环给这三个按钮绑定一个点击事件，当点击第一个按钮弹出数字0，第二个按钮弹出数字1，第三个按钮弹出数字2。。。
    */
   //1
    function hs(){
        console.log("我是要被执行的函数");
    }
    function fun1(count,fun){
        for(let i=1;i<=count;i++){
            fun();
        }
    }
    fun1(3,hs);
    //2
    function fun2(){
        return function(){console.log("第二题打印语句");}
    }
    var funcon=fun2();
    funcon()
    //3
    var sum=0;
    (function(){
        for(let j=1;j<=100;j++){
            sum=sum+j;
        }
        console.log("1~100整数和为:"+sum);
    })();
    //6 Dog
    function Dog(na){
        this.shake=function(){
            this.name=na;
            if(this.name=='Tom'){
                alert("主人回来了")
            }
        }
    }
    var dog=new Dog("Tom");
//   dog.shake();
    //7
    function fun3(a){
        if(typeof a=='function'){
            a();
        }else{
            console.log(a);
        }
        
    }
    fun3(123)
    //8
    window.onload=function(){
    for(let i=0;i<3;i++){
        let btn=document.createElement("button");
        btn.style.width='60px';
        btn.style.height='60px';
        btn.innerText="按钮"+i;
        document.body.appendChild(btn);
        btn.onclick=function(){
            let txt=this.innerText.substring(2);
            alert(txt)
        }
    }
    }
</script>
</html>